<template>
  <div>
    <el-card class="roles_card">
      <div class="roles_outbox">
        <div class="roles_leftcard">
          <el-menu
            class="el-menu-vertical-demo"
            :default-active="activeIndex"
            @select="selectMenu"
          >
            <el-menu-item v-for="ele in roleList" :key="ele.roleId" :index="''+ele.roleId">
              <i class="el-icon-user" />
              <span slot="title">{{ ele.roleName }}</span>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text" @click="$router.push('/role/add/'+id)">编辑角色</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item style="color:red">
                    <el-button type="text" @click="onDelete">删除</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>
          </el-menu>
          <el-button style="width:99%" @click="$router.push('/role/add')">添加角色</el-button>
        </div>
        <div class="roles_rightcard">
          <div class="roles_top">
            <el-tabs class="el-menu-demo" mode="horizontal">
              <el-tab-pane label="功能权限">
                <div v-loading="loading" class="roles_context">
                  <div class="roles_tree">
                    <div class="roles_treetitle">
                      园区管理
                    </div>
                    <el-tree ref="one" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="parkingPermissionsList" :props="{label: 'title',disabled:disabled}" :default-checked-keys="keys" check-strictly />
                  </div>
                  <div class="roles_tree">
                    <div class="roles_treetitle">
                      行车管理
                    </div>
                    <el-tree ref="two" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="carPermissionsList" :props="{label: 'title',disabled:disabled}" :default-checked-keys="keys" check-strictly />
                  </div>
                  <div class="roles_tree">
                    <div class="roles_treetitle">
                      物业费管理
                    </div>
                    <el-tree ref="three" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="propertyPermissionsList" :props="{label: 'title',disabled:disabled}" :default-checked-keys="keys" check-strictly />
                  </div>
                  <div class="roles_tree">
                    <div class="roles_treetitle">
                      一体杆管理
                    </div>
                    <el-tree ref="four" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="polePermissionsList" :props="{label: 'title',disabled:disabled}" :default-checked-keys="keys" check-strictly />
                  </div>
                  <div class="roles_tree">
                    <div class="roles_treetitle">
                      系统管理
                    </div>
                    <el-tree ref="five" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox :data="systemPermissionsList" :props="{label: 'title',disabled:disabled}" :default-checked-keys="keys" check-strictly />
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane v-loading="loading" :label="'成员'+'('+total+')'">
                <el-table v-loading="loading" :data="roleUserList">
                  <el-table-column label="序号" type="index" :index="indexMethod" />
                  <el-table-column label="员工姓名" prop="name" />
                  <el-table-column label="登录账号" prop="userName" />
                </el-table>
                <el-row type="flex" justify="end">
                  <el-pagination
                    :current-page="params.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="params.pageSize"
                    :total="total"
                    layout="total,  prev, pager, next,sizes"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </el-row>
              </el-tab-pane>

            </el-tabs>
          </div>

        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { delRoleAPI, getRoleIdAPI, getRoleListAPI, getRoleUserAPI, permisionTreeAPI } from '@/api/role'
export default {
  data() {
    return {
      id: '2',
      roleList: [],
      systemPermissionsList: [],
      parkingPermissionsList: [],
      carPermissionsList: [],
      propertyPermissionsList: [],
      polePermissionsList: [],
      keys: [],
      loading: false,
      activeIndex: '2',
      params: {
        page: 1,
        pageSize: 10
      },
      roleUserList: [],
      total: 0,
      shouldWatch: true// 控制是否执行watch回调的标志位
    }
  },
  watch: {
    async keys(value) {
      if (value) {
        // 判断是否为true
        if (this.shouldWatch) {
          const res = await getRoleIdAPI(this.id)

          this.$nextTick(() => {
            this.keys = res.data.perms.flat()
          }, 0)
        }
      }
    }
  },
  async created() {
    this.loadRole()
    // 创建时 默认2渲染一次
    await this.onTree(this.id)
    const res = await getRoleListAPI(this.id, this.params)
    this.roleUserList = res.data.rows
    this.total = res.data.total
  },
  methods: {
    // 删除
    async onDelete() {
      if (this.total > 0) {
        return await this.$confirm('删除角色前，请先移除角色内的所有成员。', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } else {
        await this.$confirm('删除后该角色下的用户权限失效，是否删除？', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delRoleAPI(this.id)
        this.$message.success('删除成功')
        this.loadRole()
      }
    },
    // 渲染树形节点
    async onTree(id) {
      this.loading = true
      this.keys = []
      const res = await getRoleIdAPI(id)
      this.keys = res.data.perms.flat()// 使用flat方法将二维数组转换为一维数组
      // console.log(this.keys, '我是首次')
      // 强制更新
      this.$nextTick(() => {
        this.$refs.one.setCheckedKeys(this.keys)
        this.$refs.two.setCheckedKeys(this.keys)
        this.$refs.three.setCheckedKeys(this.keys)
        this.$refs.four.setCheckedKeys(this.keys)
        this.$refs.five.setCheckedKeys(this.keys)
      }, 0)
      this.shouldWatch = false// 关闭监听
      this.loading = false
    },
    // 选中菜单的回调
    async selectMenu(index, path) {
      // 点击时拿到index===id 发请求
      // 清空keys
      this.id = index
      await this.onTree(this.id)
      const res = await getRoleUserAPI(index, this.params)

      this.roleUserList = res.data.rows
      this.total = res.data.total
    },
    async loadRole() {
      this.loading = true
      const { data } = await getRoleListAPI()
      this.roleList = data
      const res = await permisionTreeAPI()
      // console.log(res)
      this.parkingPermissionsList.push(res.data[0])
      this.carPermissionsList.push(res.data[1])
      this.propertyPermissionsList.push(res.data[2])
      this.polePermissionsList.push(res.data[3])
      this.systemPermissionsList.push(res.data[4])
      this.loading = false
    },
    // 序号
    indexMethod(index) {
      // console.log(index, '我是index')
      return index + 1 + (this.params.page - 1) * this.params.pageSize // page是当前的页码，size是页码容量
    },
    // 监听pagesize改变的事件
    async handleSizeChange(newSize) {
      this.loading = true
      this.params.pageSize = newSize
      const res = await getRoleUserAPI(this.id, this.params)
      console.log(res, '角色')
      this.roleUserList = res.data.rows
      this.total = res.data.total
      this.loading = false
    },
    // 监听页码值改变
    async handleCurrentChange(newPage) {
      this.loading = true
      this.params.page = newPage
      const res = await getRoleUserAPI(this.id, this.params)
      console.log(res, '角色')
      this.roleUserList = res.data.rows
      this.total = res.data.total
      this.loading = false
    },
    disabled() {
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.roles_card{
  width: 98%;
  padding: 2px;
  margin-left: 1%;
  .roles_outbox{
    display: flex;
    width: 1400px;
    .roles_leftcard{
      padding: 0 10px;
      box-sizing: border-box;
      width: 18%;
    }
    .roles_rightcard{
      width: 100%;
      margin-left: 10px;
      .roles_top{
        height: 100vh;

      }
      .roles_context{
        width: 1400px;
        height: 80vh;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        .roles_tree{
          width: 20%;
          height: 400px;
          text-align: center;
          border-right: 1px solid #EEF0F3;
          &:last-child{
            border-right: none;
          }
          .roles_treetitle{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 42px;
            background-color: #F5F7FA;
            margin: 10px auto;
          }
        }
      }
    }
  }

}

</style>
